<template>
<view class="punchInvideo-content">
	<view class="punchInvideo-inner">
		<view class="punchInvideo-list">
			<view class="punchInvideo-header">
				<image class="punchInvideo-bg" :src="`${prefix_image}/homepage/IntegralRecord/activityCheckInBg.png`" mode="scaleToFill" />
				<view class="active-right-red"></view>
			</view>
			
			<view
				class="punchInvideo-bottom"
			>
				<view class="punchInvideo-bottom-date">
					2022-01-03
				</view>
				<view class="punchInvideo-bottom-right">
					<image :src="`${prefix_image}/homepage/IntegralRecord/LifeRoutine.png`" />
					<text>1条回复</text>
				</view>
			</view>
			
		</view>
		<view class="punchInvideo-list">
			<view class="punchInvideo-header">
				<image class="punchInvideo-bg" :src="`${prefix_image}/homepage/IntegralRecord/activityCheckInBg.png`" mode="aspectFill" />
				<view class="active-right-red"></view>
			</view>
			
			<view
				class="punchInvideo-bottom"
			>
				<view class="punchInvideo-bottom-date">
					2022-01-03
				</view>
				<view class="punchInvideo-bottom-right">
					<image :src="`${prefix_image}/homepage/IntegralRecord/LifeRoutine.png`" />
					<text>1条回复</text>
				</view>
			</view>
			
		</view>
		<view class="punchInvideo-list">
			<view class="punchInvideo-header">
				<image class="punchInvideo-bg" :src="`${prefix_image}/homepage/IntegralRecord/activityCheckInBg.png`" mode="aspectFill" />
				<view class="active-right-red"></view>
			</view>
			
			<view
				class="punchInvideo-bottom"
			>
				<view class="punchInvideo-bottom-date">
					2022-01-03
				</view>
				<view class="punchInvideo-bottom-right">
					<image :src="`${prefix_image}/homepage/IntegralRecord/LifeRoutine.png`" />
					<text>1条回复</text>
				</view>
			</view>
			
		</view>
		<view class="punchInvideo-list unRead">
			<view class="punchInvideo-header ">
				<image class="punchInvideo-bg" :src="`${prefix_image}/homepage/IntegralRecord/activityCheckInBg.png`" mode="aspectFill" />
				<view class="active-right-red"></view>
			</view>
			
			<view
				class="punchInvideo-bottom"
			>
				<view class="punchInvideo-bottom-date">
					2022-01-03
				</view>
				<view class="punchInvideo-bottom-right">
					<image :src="`${prefix_image}/homepage/IntegralRecord/LifeRoutine.png`" />
					<text>1条回复</text>
				</view>
			</view>
			
		</view>
	</view>
</view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue"
import config from '@/hooks/useConfig.js'

export default defineComponent({
	setup() {
		const { prefix_image }=config()
		return {
			prefix_image
		}
	}
})
</script>

<style lang="stylus" scoped> 
.punchInvideo-content{
	min-height: 100vh;
	background-color: #F6F6F7;
	.punchInvideo-inner{
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		padding: 32rpx;
		.punchInvideo-list{
			width: 335rpx;
			margin-right: 16rpx;
			background-color: #fff;
			border-radius: 16rpx 0rpx 16rpx 16rpx;
			overflow: hidden;
			height: 100%;
			margin-bottom: 24rpx;
			.punchInvideo-header{
				position: relative;
				overflow:hidden;
				display: flex;
				.punchInvideo-bg{
					width: 335rpx;
					height: 446rpx;
					
				}
				.active-right-red{
					position: absolute;
					top: -4rpx;
					right: -4rpx;
					width: 18rpx;
					height: 18rpx;
					background: #FF413C;
					border: 4rpx solid #F6F6F7;
					border-radius: 50%;
				}
			}
			
			.punchInvideo-bottom{
				display: flex;
				height: 70rpx;
				align-items: center;
				padding: 0rpx 18rpx;
				.punchInvideo-bottom-date{
					flex: 1;
					font-size: 24rpx;
					// font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
				.punchInvideo-bottom-right{
					display: flex;
					align-items: center;
					
					
					image{
						width: 20rpx;
						height: 20rpx;
					}
					text{
						font-size: 22rpx;
						// font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						padding-left: 8rpx;
					}
				}
			}
		}
		.punchInvideo-list.unRead{
			border-radius: 16rpx;
			.active-right-red{
				display: none;
			}
		}
		.punchInvideo-list:nth-child(2n+2){
			margin-right: 0rpx;
		}
	}
}

</style>
